<template>
  <view class="payment-setting-container">
    <!-- 支付宝设置 -->
    <view class="setting-section">
      <view class="section-header">
        <image class="payment-icon" src="@/static/switch_tabs/u61.svg"></image>
        <text class="section-title">支付宝设置</text>
      </view>

      <view class="input-group">
        <view class="input-item">
          <text class="input-label required">支付宝账号</text>
          <input
            class="input-field"
            type="text"
            placeholder="请输入您的支付宝账号"
            v-model="setBankInfo.alipay_account"
          />
        </view>

        <view class="input-item">
          <text class="input-label required">真实姓名</text>
          <input
            class="input-field"
            type="text"
            placeholder="请输入支付宝的真实姓名"
            v-model="setBankInfo.alipay_name"
          />
        </view>
      </view>
    </view>

    <!-- 银行卡设置 -->
    <view class="setting-section">
      <view class="section-header">
        <image class="payment-icon" src="@/static/switch_tabs/u62.svg"></image>
        <text class="section-title required">银行卡设置</text>
      </view>

      <view class="input-group">
        <selectBrand
          style="width: 100%"
          v-model="setBankInfo.banks_types"
          label="银行卡类型"
          :options="bankList"
          placeholder="请选择银行卡"
          :title="`请选择银行卡`"
        />

        <view class="input-item">
          <text class="input-label required">银行卡号</text>
          <input
            class="input-field"
            type="number"
            placeholder="请输入您的银行卡号"
            v-model="setBankInfo.bank_card"
          />
        </view>

        <view class="input-item">
          <text class="input-label required">卡号户名</text>
          <input
            class="input-field"
            type="text"
            placeholder="请输入您的卡号户名"
            v-model="setBankInfo.bank_name"
          />
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="bottom-action">
      <button class="save-btn" @tap="saveSettings">保存</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import {
  getallBank,
  setBankSetting,
  getPayMoneySetting,
} from "@/apiShop/paymoney.js";
import { onLoad } from "@dcloudio/uni-app";
import selectBrand from "@/component/goods/selectBrand.vue";
import { showToast } from "@/utils/helper";
const setBankInfo = ref({
  banks_types: undefined,
  bank_card: "",
  bank_name: "",
  alipay_account: "",
  alipay_name: "",
});

const bankList = ref([]);
const getBankOption = async () => {
  const res = await getallBank();
  Object.keys(res).forEach((key) => {
    bankList.value.push({
      id: key,
      name: res[key],
    });
  });
  console.log(bankList.value);
};

const getPayMoneySettingData = async () => {
  const res = await getPayMoneySetting();
  setBankInfo.value = res;
};

// 保存设置
const saveSettings = async () => {
  // 验证表单
  let check = false;
  Object.keys(setBankInfo.value).forEach((key) => {
    if (!setBankInfo.value[key]) {
      check = true;
    }
  });
  if (check)
    return uni.showToast({
      title: "请填写完整信息",
      icon: "none",
    });
  await setBankSetting(setBankInfo.value);
  showToast("设置成功");
  setTimeout(() => {
    uni.navigateBack();
  }, 800);
};

onLoad(async () => {
  await getBankOption();
  await getPayMoneySettingData();
});
</script>

<style lang="scss" scoped>
.payment-setting-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx 0;
}

/* 设置区域样式 */
.setting-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 0 30rpx;
}

.section-header {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.payment-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

/* 输入组样式 */
.input-group {
  padding: 20rpx 0;
}

.input-item {
  padding: 15rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}

.input-item:last-child {
  border-bottom: none;
}

.input-label {
  font-size: 28rpx;
  color: #333;
  display: block;
  min-width: 136rpx;
}

.input-field {
  height: 80rpx;
  font-size: 28rpx;
  color: #333;
  border: none;
  flex: 1;
}

.select-field {
  width: 100%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-text {
  font-size: 28rpx;
  color: #999;
}

.select-arrow {
  font-family: "gui-iconfont";
  font-size: 32rpx;
  color: #999;
}

/* 底部保存按钮样式 */
.bottom-action {
  padding: 40rpx 30rpx;
}

.save-btn {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #09f;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
}

.required::before {
  content: "*";
  color: #ff0000;
  margin-right: 4rpx;
}
</style>
